<template>
  <div class="loginWrap">
    <div class="header">
      <!-- <van-nav-bar
        title="注册"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
      ></van-nav-bar> -->
    </div>
    <div class="contentWrap">
      <div class="content">
        <div class="logoWrap">
          <img src="./../assets/images/logo.png" alt="" class="logo" />
        </div>
        <div class="loginWrap">
          <van-form @submit="register">
            <van-field name="headPic" label="头像">
              <template #input>
                <van-uploader
                  v-model="headPic"
                  :after-read="afterRead"
                  :max-count="1"
                />
              </template>
            </van-field>
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              required
              :clearable="true"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              required
              :clearable="true"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              v-model="phone"
              type="tel"
              name="手机号"
              label="手机号"
              placeholder="手机号"
              required
              :clearable="true"
              :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
              v-model="email"
              name="邮箱"
              label="邮箱"
              placeholder="邮箱"
              required
              :clearable="true"
              :rules="[{ required: true, message: '请填写邮箱' }]"
            />
            <van-field
              v-model="college"
              name="学院"
              label="学院"
              placeholder="学院"
              required
              :clearable="true"
              :rules="[{ required: true, message: '请填写学院' }]"
            />
            <van-field name="role" label="角色" required>
              <template #input>
                <van-radio-group v-model="role" direction="horizontal">
                  <van-radio name="1">学生</van-radio>
                  <van-radio name="2">老师</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field name="sex" label="性别" required>
              <template #input>
                <van-radio-group v-model="sex" direction="horizontal">
                  <van-radio name="1">男</van-radio>
                  <van-radio name="2">女</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              v-model="safetyProblem1"
              name="安全问题1"
              label="安全问题1"
              placeholder="我的大学学号是？"
              required
              :clearable="true"
              :rules="[{ required: true, message: '请填写安全问题1' }]"
            />
            <van-field
              v-model="safetyAnswer1"
              name="安全问题答案1"
              label="答案1"
              placeholder="2017764423"
              required
              :clearable="true"
              :rules="[{ required: true, message: '请填写安全问题答案1' }]"
            />
            <van-field
              v-model="safetyProblem2"
              name="安全问题2"
              label="安全问题2"
              placeholder="我的大学名称是？"
              required
              :clearable="true"
              :rules="[{ required: true, message: '请填写安全问题2' }]"
            />
            <van-field
              v-model="safetyAnswer2"
              name="安全问题答案2"
              label="答案2"
              placeholder="岭南师范学院"
              required
              :clearable="true"
              :rules="[{ required: true, message: '请填写安全问题答案2' }]"
            />
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit"
                >提交</van-button
              >
            </div>
          </van-form>
          <span class="tips"
            >安全问题及答案一旦提交，将无法更改，请谨慎填写，这将影响您后续找回密码。</span
          >
        </div>
      </div>
      <div class="footer">
        <!-- <div class="forget">忘记密码</div> -->
        <div></div>
        <div class="goLogin" @click="login">已有账号，去登录</div>
      </div>
      <cutImage
        ref="cropper"
        :show.sync="showCutImageTool"
        :img="cutImageSrc"
        :autoCrop="true"
        :autoCropWidth="300"
        :autoCropHeight="300"
        :fixed="true"
        @cutImageFinish="cutImageFinish"
        @cutImageCancel="cutImageCancel"
      >
      </cutImage>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line standard/object-curly-even-spacing
import { SignIn } from '@/views/api/api.js'
import { Toast, Dialog } from 'vant'
import cutImage from '../components/cutImage.vue'
// const sendMSG = require('./../utils/sentMSG')
// 引入阿里云短信
export default {
  components: {
    cutImage
  },
  data () {
    return {
      username: '', // 用户名
      password: '', // 用户密码
      phone: null, // 手机号
      email: '', // 邮箱
      college: '', // 学院
      safetyProblem1: '', // 安全问题1
      safetyProblem2: '', // 安全问题2
      safetyAnswer1: '', // 安全问题答案1
      safetyAnswer2: '', // 安全问题答案2
      sex: '1', // 性别 1男，2女
      role: '1', // 角色 1学生，2老师
      headPic: [], // 头像
      showCutImageTool: false,
      cutImageSrc: ''
    }
  },
  computed: {},
  created () {},
  methods: {
    // 登录
    login () {
      this.$router.replace({ path: '/login' })
    },
    // 点击去注册
    register () {
      // 创建账号密码
      let params = {
        username: this.username,
        password: this.password,
        phone: this.phone,
        sex: this.sex,
        college: this.college,
        headPic: this.headPic,
        email: this.email,
        safetyProblem1: this.safetyProblem1,
        safetyProblem2: this.safetyProblem2,
        safetyAnswer1: this.safetyAnswer1,
        safetyAnswer2: this.safetyAnswer2,
        role: this.role
      }
      SignIn(params).then(res => {
        console.log(res)
        if (res.data.code) {
          Toast.fail(res.data.msg)
        } else {
          Dialog.alert({
            message: '注册成功，去登录。'
          }).then(() => {
            this.$router.replace({ path: '/login' })
          })
        }
      })
    },
    // 点击返回
    onClickLeft () {
      this.$router.go(-1)
    },
    afterRead (file) {
      console.log('22222222222')
      if (file.status === 'uploading') {
        file.message = '上传中...'
      } else if (file.status === 'failed') {
        file.message = '上传失败'
      } else {
        file.message = '上传成功'
        this.cutImageSrc = file.content
        // 显示截剪组件
        this.showCutImageTool = true
      }
    },
    // 显示截剪组件
    changeImage () {
      this.showCutImageTool = true
    },
    // 截剪完成，回调图片base64
    cutImageFinish (data) {
      // 接口上传图片
      this.headPic[0].content = data
      console.log(this.headPic)
    },
    // 点击关闭裁剪
    cutImageCancel () {
      this.headPic = []
    }
  }
}
</script>
<style scoped>
.logoWrap {
  width: 1rem;
  margin: 0 auto;
}
.contentWrap {
  height: calc(100vh - 46px);
  overflow-y: auto;
}
/* 页面可以滚动，但是不出现滚动条 */
.contentWrap::-webkit-scrollbar {
  width: 0;
}
.header {
  height: 46px;
}
.content {
  margin: 0 16px;
}
.logo {
  width: 100%;
}
.footer {
  margin: 0 16px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.tips {
  color: #d0d0d0;
}
</style>
